<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>客服工单待办列表</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="css/customerservicelist.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.reset.css" />
    <link rel="stylesheet" type="text/css" href="css/renwulist.css" />
    <link rel="stylesheet" type="text/css" href="css/analysis_historyfeesummary.css" />
    <style>
        .organization_list_li_icon {
            margin-top: 2.5rem;
        }

        .aui-content {
            width: 100%;
            overflow: auto;
        }

        .new-span-width i {
            font-size: 14px;
            margin-left: 6px;
        }

        .typeitem {
            width: 100%;
            /* background: #f00; */
        }

        .boxtime {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 0.7rem;
        }

        .workheader {
            width: 100%;
            margin: 0px 0px 10px 0px;
            overflow: hidden;
        }

        .work_con_box_left {
            width: 10%;
        }

        .work_con_box_right {
            width: 100%;
        }

        .work_title_add {
            width: 70%;
            font-size: 0.8rem;
            font-weight: 500;
            margin-top: 0px;
        }

        span.top-name {
            font-size: 0.8rem;
            font-weight: 500;
        }

        .label-btn-red {
            background: #FFF7EF;
            padding: 0px 3px;
            border-radius: 4px;
            margin-left: 4px;
            font-size: 0.6rem;
            color: #FF7056;
        }

        .label-btn-green {
            background: #d9f0dc;
            padding: 0px 3px;
            border-radius: 4px;
            margin-left: 4px;
            font-size: 0.6rem;
            color: #0b940b;
        }

        .label-btn-blue {
            background: #eef9fd;
            padding: 0px 3px;
            border-radius: 4px;
            margin-left: 4px;
            font-size: 0.6rem;
            color: #289FFF;
        }

        .marginheight {
            margin-top: 0.2rem;
        }

        .work_con_box_left i {
            font-size: 1rem !important;
            color: #666;
        }

        /* .work_con_box_right label.title{
            color:#000;
            font-size: 0.75rem;
            font-weight: 600;
        } */
        .maskbg {
            background: rgba(0, 0, 0, .3);
            z-index: 98;
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .choosebox {
            position: fixed;
            top: 22%;
            left: 0;
            right: 0;
            /* padding: 15px; */
            border-top: solid 1px #eee;
            margin-top: 5px;
            background: #fff;
            padding-bottom: 10px;
            z-index: 999;
            height: 50%;

            overflow-y: scroll;
        }

        .showTopstyle {
            width: 50%;
            height: 300px !important;
            top: 1.6rem;
            margin: 0 auto;
            border-radius: 6px;
        }

        .topstyle {
            width: 100%;
            height: 48px;
            line-height: 48px;
            text-align: center;
            color: #666;
            border-top: solid 0.5px #f7f7f7;
        }

        .typestatus {
            width: 28%;
            font-size: 0.6rem;
            text-align: right;
            font-weight: normal;
            color: #999;
            float: right;
        }

        .work_con_box {
            margin-bottom: 10px;
        }

        /* 顶部新样式 */
        .searchparam {
            position: fixed;
            top: 35px;
            left: 0;
            right: 0;
            padding: 15px;
            border-top: solid 1px #eee;
            margin-top: 5px;
            background: #fff;
            border-radius: 0px 0px 14px 14px;
            z-index: 99;
            height: 50%;
        }

        .searchparamitem label {
            display: inline-block;
            background: #eee;
            color: #666;
            border-radius: 100px;
            line-height: 24px;
            padding: 0 15px;
            margin: 0 14px 15px 0;
            border: solid 1px #eee;
            font-size: 0.6rem;
        }

        .searchparamtitle {
            font-size: 0.7rem;
            line-height: 50px;
            text-shadow: 0px 0px 0px #000;
        }

        .aui_bottombtn.left {
            color: #828c9a;
            background: #fff;
            box-shadow: 0px 4px 8px 0px rgb(60 128 209 / 10%);
            border: solid 0.5px #f7fbff;
            position: absolute;
            top: 0.8rem;
            bottom: 0.5rem;
            left: 0.5rem;
            width: 35%;
        }

        .searchparamitem label.active {
            background: #289fff;
            color: #fff;
            border: solid 1px #289fff;
        }

        .aui_bottom {
            height: 4rem;
            position: absolute;
            background: none;
            border-top: solid 0.5px #f8f8f8;
        }

        .aui_bottombtn {
            line-height: 1.8rem;
            color: #fff;
            font-size: 0.7rem;
            text-align: center;
            height: 1.8rem;
            background: #289FFF;
            box-shadow: 0px 4px 8px 0px rgb(49 127 203 / 32%);
            border-radius: 22px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!-- 弹框黑色背景 -->
        <div v-on:click="doHideSearch()" v-if="showsearch" class="maskbg">
        </div>
        <!-- //项目筛选 -->
        <div v-if="showsearchparam" class="searchparam" style="height: 50%;">
            <div class="searchcontent" style="height: 100%;">
                <div class="searchparamtitle">
                    工单状态
                </div>
                <div class="searchparamitem">
                    <label v-on:click="doSelectstatus(item.ID)"
                        v-bind:class="{'active':form.statusListIDS.indexOf(item.ID)>-1}"
                        v-for="item in statusList">{{item.Name}}</label>
                </div>
                <div class="aui_bottom">
                    <div v-on:click="doReset(1)" class="aui_bottombtn left">重置</div>
                    <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
                </div>
            </div>
        </div>
        <!-- 排序筛选 -->
        <div v-if="showsearchmonth" class="searchparam" style="height:30%;">
            <div class="van-popup van-popup--top van-dropdown-item__content">
                <div class="new-vant-cell van-cell van-cell--center" v-for="item in option3" @click="onChooseSort(item)"
                    v-bind:class="{'vant-active':item.value==choosesortmodel.value}">
                    <div class="van-cell__title"><span>{{item.text}}</span></div>
                </div>
            </div>
        </div>
        <div class="search_box fixedbox  bgshadow" v-bind:class="{'fixedbox':showsearch}" style=" background: #fff;">
            <div class="searchitem" v-bind:class="{'chkedbox':showsearchparam}" v-on:click="doSelectSearchParam(1)">
                筛选
                <i v-if="!showsearchparam" class="icon iconfont icon-down"></i>
                <i v-if="showsearchparam" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
            <div class="searchitem" v-bind:class="{'chkedbox':showsearchmonth}" v-on:click="doSelectSearchParam(2)">
                {{choosesortmodel.text}}
                <i v-if="!showsearchmonth" class="icon iconfont icon-down"></i>
                <i v-if="showsearchmonth" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
        </div>

        <!--之前的样式-->
        <!-- <div id="topheader" class="aui-content headerBox">
                <div class="fullName" id="chooseproject" >
                    <van-dropdown-menu active-color="#1989fa"  class="aui-margin-r-5 new-van-dropdown-menu" >
                        <van-dropdown-item :title="optionTitle" ref="choosetask" > 
                            <van-cell v-for="item in option2" center :title="item.Name" @click="onChooseTask(item)"  class="new-vant-cell"
                            v-bind:class="{'vant-active':item.Type==choosetaskmodel.Type}">
                              <template #right-icon>
                                {{item.Number}}
                              </template>
                            </van-cell>
                          </van-dropdown-item>       
                      </van-dropdown-menu>
                      <van-dropdown-menu active-color="#1989fa" class="new-van-dropdown-menu">
                        <van-dropdown-item :title="choosesortmodel.text" ref="choosesort" > 
                            <van-cell v-for="item in option3" center :title="item.text" @click="onChooseSort(item)"  class="new-vant-cell"
                            v-bind:class="{'vant-active':item.value==choosesortmodel.value}">
                            </van-cell>
                          </van-dropdown-item>
                      </van-dropdown-menu>
                    
                    <div class="cl"></div>
                </div>
            </div> -->

        <section id="main_refresh" class="aui-refresh-content" style="margin-top: 2.3rem;">
            <div class="aui_listbox task aui-margin-t-5" v-if="searchlist.length>0">
                <div v-bind:id="'scroll' + item.JpushLogID" :name="'scroll-item'+item.JpushLogID" class="typeitem"
                    v-for="item in searchlist">
                    <!-- <div class="boxtime">{{item.JpushAddTime}}</div> -->
                    <div class="boxbg">
                        <div class="boxcenter">
                            <div class="boxarea">
                                <div v-on:click="openGongdan(item)" class="work_con_box mainbox">
                                    <div class="workheader">
                                        <div class="work_title_add ellipsis_one fl">
                                            <div class="boxpic fl" v-if="form.IsWorkOrder==1"><img
                                                    src="../image/icon/kefu.png"></div>
                                            <div class="boxpic fl" v-if="form.IsWorkOrder==2"><img
                                                    src="../image/icon/tousu.png"></div>
                                            <span class="top-name" v-if="form.servicetype==1">报修-{{item.TypeName}}</span>
                                            <span class="top-name" v-if="form.IsWorkOrder==2">{{item.TypeName}}</span> 
                                            <span v-if="item.UrgencyStatus==1" class="label-btn-red" style="color: red;background: #F0D6D4;">紧急</span>
                                        </div>
                                        <div class="typestatus">{{item.AddRepairTime?item.AddRepairTime:item.AddTime}}</div>
                                    </div>
                                    <div class="work_con_box_time marginheight">
                                        <div class="work_con_box_right">
                                            <label>报修位置：{{item.FullName}}</label>
                                        </div>
                                    </div>
                                    <div v-if="form.servicetype==1" class="work_con_box_time marginheight">
                                        <div class="work_con_box_right">
                                            <label>报修区域：{{item.ServiceArea}}<span v-if="item.ServiceFee!=''"
                                                    class="label-btn-green">收费</span></label>
                                        </div>
                                    </div>
                                    <div class="work_con_box_time marginheight">
                                        <div class="work_con_box_right">
                                            <label>
                                                报修时间：{{item.AddRepairTime?item.AddRepairTime:item.AddTime}}
                                                <!-- <span class="label-btn-blue">{{item.ServiceStatusDesc}}</span>
                                                <span v-if="item.ServiceOverTime==1" class="label-btn-red">超时</span> -->
                                                </label>
                                        </div>
                                    </div>
                                    <div class="work_con_box_time marginheight">
                                        <div class="work_con_box_right">
                                            <label> 报修人：{{item.AddCustomerName?item.AddCustomerName:'--'}}</label>
                                        </div>
                                    </div>
                                    <div v-if="item.ServiceContent!=''"
                                        class="work_con_box_time marginheight work_con_box_contain ellipsis_two">
                                        <label style="color:#344356">内容：{{item.ServiceContent}}</label>
                                    </div>
                                </div>
                                <div class="new_customer_typebox">
                                    <div v-on:click="openGongdan(item)" class="text-bold">
                                        <span class="text-org">{{item.ServiceStatusDesc}}</span>
                                        <span v-if="item.ServiceOverTime==1" class="text-org">| 超时</span>
                                        <span  v-if="item.StopStatus==1" class="text-grey">(暂停中)</span>
                                    </div>
                                    <div v-if="item.canAccept||item.canAcceptOrder||item.canSend||item.canAfreshSend||item.canChuidan||item.canRefuse||item.canHandle||item.canComplete||item.canVisit||item.canClose"  class="new-btn-popup">
                                        <label v-on:click="doIsOpenPopup(item)" class="customer_beginbtn new_customer_btn btn-blur" >操作</label>
                                        <div v-if="item.IsOpenPopup" class="new-btn-content">
                                            <div v-if="item.canAccept&&operation.canAccept" v-on:click="do_isShouli(item)" >受理</div>
                                            <div v-if="item.canAcceptOrder&&operation.canAcceptOrder" v-on:click="do_accpet(item)" >接单</div>
                                            <div v-if="item.canSend&&operation.canSend" v-on:click="do_open_chooseuser(item,1)" >派单</div>
                                            <div v-if="item.canAfreshSend&&operation.canAfreshSend" v-on:click="do_open_chooseuser(item,4)">重派</div>
                                            <div v-if="item.canChuidan&&operation.canChuidan"  v-on:click="do_open_cuidan(item.ID)" >催单</div>
                                            <div v-if="item.canRefuse&&operation.canRefuse" v-on:click="do_open_nodialog(item.ID)" >拒绝</div>
                                            <div v-if="item.canHandle&&operation.canHandle" v-on:click="do_chuli(item)" >处理</div>
                                            <div v-if="item.canComplete&&operation.canComplete" v-on:click="do_complete(item)" >完工</div>
                                            <div v-if="item.canVisit&&operation.canVisit" v-on:click="do_huifang(item)" >回访</div>
                                            <div v-if="item.canClose&&operation.canClose" v-on:click="do_open_dialog(item.ID)" >关单</div>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <label v-on:click="openGongdan(item)" class="customer_beginbtn new_customer_btn"  >查看</label>
                                    </div>
                                </div> 
                                <!-- <div class="new-btn-bottom" style="border-top:solid 0.5px #f5f5f5; width: 94%; margin-left: 3%; overflow: hidden;">
                                    <div v-if="item.canVisit&&operation.canVisit" class="work_beginbtnty3 new-blue-btn"
                                        v-on:click="do_huifang(item)">
                                        回访
                                    </div>
                                    <div v-if="item.canClose&&operation.canClose" class="work_beginbtnty3 new-blue-btn"
                                        v-on:click="do_open_dialog(item.ID)">
                                        关单
                                    </div>
                                    <div v-if="item.canSend&&operation.canSend" class="work_beginbtnty3 new-blue-btn"
                                        v-on:click="do_open_chooseuser(item,1)">
                                        派单
                                    </div>
                                    <div v-if="item.canAccept&&operation.canAccept"
                                        class="work_beginbtnty3 new-blue-btn" v-on:click="do_isShouli(item)">
                                        受理
                                    </div>
                                    <div v-if="item.canAfreshSend&&operation.canAfreshSend"
                                        class="work_beginbtnty3 new-blue-btn" v-on:click="do_open_chooseuser(item,4)">
                                        重派
                                    </div>
                                    <div v-if="item.canChuidan&&operation.canChuidan"
                                        class="work_beginbtnty3 new-blue-btn" v-on:click="do_open_cuidan(item.ID)">
                                        催单
                                    </div>
                                    <div v-if="item.canRefuse&&operation.canRefuse"
                                        class="work_beginbtnty3 new-blue-btn" v-on:click="do_open_nodialog(item.ID)">
                                        <label class="text-grey"> 拒绝</label>
                                    </div>
                                    <div v-if="item.canAcceptOrder&&operation.canAcceptOrder"
                                        class="work_beginbtnty3 new-blue-btn" v-on:click="do_accpet(item)">
                                        接单
                                    </div>
                                    <div v-if="item.canComplete&&operation.canComplete"
                                        class="work_beginbtnty3 new-blue-btn" v-on:click="do_complete(item)">
                                        完工
                                    </div>
                                    <div v-if="item.canHandle&&operation.canHandle"
                                        class="work_beginbtnty3 new-blue-btn" v-on:click="do_chuli(item)">
                                        处理
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="noinfo" id="noorder" v-if="searchlist!=undefined&&searchlist.length==0">
                <img src="../image/index/noinfomsg_icon.png" alt="" />
                <h5><br />暂无相关信息</h5>
            </div>
        </section>




    </div>

</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.picker.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.poppicker.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/aui-popup.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="js/customer_renwulist.js"></script>

</html>